<template>
	<view class="page-container bg-grey fs-24">
		<up-navbar safeAreaInsetTop fixed placeholder title="行程详情" @left-click="pageBack"></up-navbar>
		<view class="card">
			<view class="title">{{ tripData.name }}</view>
			<view class="line-info">
				<view class="block-row">
					<view class="block-label">
						<image :src="`${imgBaseUrl}rili-icon.png`" class="icon-24 mr-4 pt-2 middle" />
						<text class="text">使用日期</text>
					</view>
					<view class="block-info dateColor">{{ formatDate(basicData.tour_date) }}出发</view>
				</view>
				<view class="block-row">
					<view class="block-label">
						<image :src="imgBaseUrl + 'trip-package-icon.png'" class="icon-24 mr-4 middle" />
						<text class="text">预定套餐</text>
					</view>
					<view class="block-info">{{ basicData.sku_name }}</view>
				</view>
			</view>
		</view>
		<template v-if="tripData?.itinerary_infos?.length">
			<Itinerary :business_type="tripData.business_type" :itinerary_infos="tripData.itinerary_infos" />
		</template>
		<view class="card">
			<view class="title">产品介绍</view>
			<view class="parse-wrap">
				<up-parse :content="tripData.spu_description"></up-parse>
			</view>
		</view>
		<!-- 预定须知 -->
		<view class="card" v-if="tripData.booking_tips.length">
			<view class="title">预定须知</view>
			<view class="know-box" v-for="(item, idex) in tripData.booking_tips" :key="idex">
				<view class="sub-title">{{ item.title }}</view>
				<view class="sub-content">{{ item.content }}</view>
			</view>
		</view>
		<!-- 取消说明 -->
		<RefundRule
			:tourist_refund_fee_rules="tripData.tourist_refund_fee_rules"
			:ta_refund_fee_rules="tripData.ta_refund_fee_rules"
			:ta_display_penalty="tripData.ta_display_penalty"
			:ta_penalty_txt="tripData.ta_penalty_txt"
		/>
		<!-- 费用说明 -->
		<DescFees :expenses="tripData.expenses"></DescFees>
	</view>
</template>

<script setup lang="ts">
import RefundRule from "../components/refund-rule.vue"
import DescFees from "../components/desc-fees.vue"
import Itinerary from "../components/itinerary.vue"
import { pageBack } from "@/utils/page-redirect"
import { $getTripSales } from "@/api/trip"
import { onLoad } from "@dcloudio/uni-app"
const imgBaseUrl = inject("imgBaseUrl")
const tripData = ref({})
const tripId = ref(null)
const basicData = ref({})
const formatDate = (date: string) => {
	const [datePart] = date.split(" ") // 分割日期和时间部分
	const arr = datePart.split("-") // 分割年、月、日

	return arr.reduce((pre: string, cur: string, index: number) => {
		const suffix = ["年", "月", "日"][index]
		return pre + cur + suffix
	}, "")
}
//#endregion
onLoad((options) => {
	tripId.value = options.id
	basicData.value = options
	getTripDetail()
})
const getTripDetail = async () => {
	const data = await $getTripSales(tripId.value)
	console.log(data, "data--")
	tripData.value = data
}
</script>

<style lang="scss" scoped>
.card {
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	border-radius: 16rpx;
	background-color: #fff;
	.know-box {
		margin-bottom: 64rpx;
		.sub-title {
			color: #1d2129;
			font-size: 28rpx;
		}
		.sub-content {
			padding-top: 16rpx;
			color: #4e5969;
			line-height: 40rpx;
		}
	}
	.know-box:last-child {
		margin-bottom: 0;
	}
	.title {
		margin-bottom: 24rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 52rpx;
	}
	.line-info {
		width: 100%;
		background: #f7f8fa;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 16rpx;
		font-size: 24rpx;
		margin-top: 24rpx;

		.block-info {
			color: #4e5969;
			width: 462rpx;
		}
		.dateColor {
			color: #bc8400;
		}
		.block-row {
			display: flex;
			margin-bottom: 16rpx;
			.block-label {
				color: #86909c;
				margin-right: 24rpx;
				flex-shrink: 0;
				display: inline-block;
				.middle {
					vertical-align: middle;
				}
				.text {
					vertical-align: middle;
				}
			}
		}
		.right-icon {
			width: 12rpx;
			height: 12rpx;
		}
	}
	.description {
		.parse-wrap {
			position: relative;
		}
	}
}
</style>
